<template>
  <div class="message-center">
    <!-- 左侧消息列表 -->
    <div class="message-sidebar">
      <!-- 搜索框 -->
      <div class="search-box">
        <input type="text" placeholder="搜索消息" />
        <span class="iconfont icon-search"></span>
      </div>

      <!-- 消息列表 -->
      <div class="message-list">
        <div
          v-for="(message, index) in messages"
          :key="index"
          class="message-item"
          :class="{ active: activeMessage === index }"
          @click="activeMessage = index"
        >
          <!-- 左侧日期方块 -->
          <div
            class="date-box"
            :style="{
              backgroundColor: index % 2 === 0 ? '#545766' : '#fff',
              color: index % 2 === 0 ? '#fff' : '#545766',
            }"
          >
            <div class="date">{{ message.date }}</div>
            <div class="year">{{ message.year }}</div>
          </div>

          <!-- 右侧内容 -->
          <div class="message-content-box">
            <div class="message-header">
              <span class="title"
                >{{ message.title
                }}<span class="tag" v-if="message.tag">{{
                  message.tag
                }}</span></span
              >
              <span class="time">{{ message.time }}</span>
            </div>
            <div class="message-content">
              {{ message.content }}
            </div>
          </div>
        </div>

        <!-- 系统消息 -->
        <div class="system-message">
          <div class="message-icon">
            <span class="iconfont icon-mail"></span>
          </div>
          <div class="message-info">
            <div class="message-title">系统消息</div>
            <div class="message-info">收到一条今日任务</div>
          </div>
          <div class="message-time">10:16</div>
        </div>
      </div>
    </div>

    <!-- 右侧消息详情 -->
    <div class="message-detail">
      <div class="detail-header">
        <h2>#系统通知</h2>
      </div>

      <div class="message-content-list">
        <div
          class="message-card"
          v-for="(card, index) in messageCards"
          :key="index"
        >
          <div class="card-header">
            <div class="card-icon">
              <span class="iconfont icon-order"></span>
            </div>
            <div class="card-title">新增订单</div>
          </div>

          <div class="card-content">
            <div class="content-item">
              <span class="label">执行日期：</span>
              <span class="value">2025/08/20 - 2025/09/05</span>
            </div>
            <div class="content-item">
              <span class="label">类型：</span>
              <span class="value">婚礼</span>
              <span class="label" style="margin-left: 20px">天数：</span>
              <span class="value">1天</span>
            </div>
            <div class="content-item">
              <span class="label">服务项目：</span>
              <span class="value">后期制作</span>
            </div>
            <div class="content-item">
              <span class="label">任务薪资：</span>
              <span class="value">600</span>
            </div>
            <div class="content-item">
              <span class="label">分配人：</span>
              <span class="value">张三丰</span>
            </div>
            <div class="content-item">
              <span class="label">创建时间：</span>
              <span class="value">2025/06/27 21:30</span>
            </div>
          </div>

          <div class="card-footer">
            <button class="confirm-btn">确认订单</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 当前选中的消息
const activeMessage = ref(0);

// 消息列表数据
const messages = ref([
  {
    date: "07.24",
    title: "南京摄影",
    tag: "婚礼",
    time: "12:02",
    content: "订单状态变更",
    year: "2025",
  },
  {
    date: "07.24",
    title: "西安喜来登摄影",
    tag: "商务",
    time: "08/14",
    content: "订单状态变更",
    year: "2025",
  },
  {
    date: "07.25",
    title: "上海产品拍摄",
    tag: "电商",
    time: "09:30",
    content: "新订单提醒",
    year: "2025",
  },
  {
    date: "07.26",
    title: "北京商业广告",
    tag: "商业",
    time: "14:20",
    content: "订单已完成",
    year: "2025",
  },
  {
    date: "07.27",
    title: "杭州婚纱摄影",
    tag: "婚礼",
    time: "16:45",
    content: "客户反馈",
    year: "2025",
  },
  {
    date: "07.28",
    title: "广州活动拍摄",
    tag: "活动",
    time: "10:15",
    content: "订单审核通过",
    year: "2025",
  },
  {
    date: "07.29",
    title: "深圳电商拍摄",
    tag: "电商",
    time: "11:30",
    content: "付款提醒",
    year: "2025",
  },
]);

// 消息卡片数据
const messageCards = ref([
  {
    type: "新增订单",
    dateRange: "2025/08/20 - 2025/09/05",
    category: "婚礼",
    days: "1天",
    service: "后期制作",
    salary: "600",
    assignee: "张三丰",
    createTime: "2025/06/27 21:30",
  },
  {
    type: "新增订单",
    dateRange: "2025/08/25 - 2025/08/27",
    category: "商业",
    days: "3天",
    service: "拍摄+后期",
    salary: "2400",
    assignee: "李四",
    createTime: "2025/06/28 14:20",
  },
  {
    type: "订单更新",
    dateRange: "2025/09/01 - 2025/09/03",
    category: "活动",
    days: "2天",
    service: "现场拍摄",
    salary: "1800",
    assignee: "王五",
    createTime: "2025/06/29 09:45",
  },
]);
</script>

<style scoped lang="less">
.message-center {
  display: flex;
  height: 100%;
  background-color: #fff;
  border-top: #eaeaea 1px solid;
}

/* 左侧消息列表 */
.message-sidebar {
  width: 280px;
  border-right: 1px solid #eaeaea;
  display: flex;
  flex-direction: column;

  .search-box {
    position: relative;
    padding:13px 20px;

    input {
      width: 100%;
      padding: 10px 40px 10px 16px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;

      &:focus {
        outline: none;
        border-color: #3f91f7;
      }
    }

    .icon-search {
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
  }

  .message-list {
    flex: 1;
    overflow-y: auto;

    .message-item {
      display: flex;
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;

      &.active {
        background-color: #f6f7fb;
      }

      &:hover {
        background-color: #f6f7fb;
      }

      .date-box {
        width: 50px;
        height: 50px;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        flex-shrink: 0;

        .date {
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 2px;
        }

        .year {
          font-size: 12px;
          opacity: 0.8;
        }
      }

      .message-content-box {
        flex: 1;
        min-width: 0;

        .message-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 6px;

          .title {
            font-size: 14px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            .tag {
              display: inline-block;
              padding: 1px 6px;
              border-radius: 10px;
              background-color: rgba(0, 0, 0, 0.1);
              margin-left: 6px;
              font-size: 10px;
            }
          }

          .time {
            font-size: 12px;
            color: #999;
            margin-left: 8px;
            flex-shrink: 0;
          }
        }

        .message-content {
          font-size: 13px;
          color: #666;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .system-message {
      display: flex;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;

      .message-icon {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        background: linear-gradient(135deg, #73d1f3, #5e91ef);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;

        .iconfont {
          color: #fff;
          font-size: 28px;
        }
      }

      .message-info {
        flex: 1;

        .message-title {
          font-size: 14px;
          font-weight: 500;
          margin-bottom: 4px;
        }

        .message-info {
          font-size: 12px;
          color: #666;
        }
      }

      .message-time {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

/* 右侧消息详情 */
.message-detail {
  flex: 1;
  background-color: #f6f7fb;
  overflow-y: auto;

  .detail-header {
    background: #fff;
    padding: 20px;
    h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: #323335;
    }
  }

  .message-content-list {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    height: calc(100vh - 133px);
    .message-card {
      background-color: #fff;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      min-width: 600px;

      .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid #f0f0f0;

        .card-icon {
          width: 36px;
          height: 36px;
          border-radius: 8px;
          background: linear-gradient(135deg, #73d1f3, #5e91ef);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12px;

          .iconfont {
            color: #fff;
            font-size: 18px;
          }
        }

        .card-title {
          font-size: 16px;
          font-weight: 600;
          color: #323335;
        }
      }

      .card-content {
        .content-item {
          display: flex;
          margin-bottom: 12px;
          font-size: 14px;

          .label {
            color: #666;
            width: 80px;
            flex-shrink: 0;
            text-align: right;
          }

          .value {
            color: #323335;
            font-weight: 500;
          }
        }
      }

      .card-footer {
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid #f0f0f0;
        text-align: right;

        .confirm-btn {
          background: none;
          border: none;
          color: #3f91f7;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          padding: 6px 16px;
          border-radius: 4px;

          &:hover {
            background-color: rgba(63, 145, 247, 0.1);
          }
        }
      }
    }
  }
}
</style>